<style lang="scss">
  .btn-text{
    font-size:8px
  }
  .searchbtn{
    margin-left:34%
  }
  .v-modal {
    z-index: 10 !important;
  }
  .alarm-search {
    height: 40px;
  }
  .el-tabs--border-card >.el-tabs__content {
    padding: 0!important;
  }
  .record-pagination {
    margin-top: 10px;
    text-align: right;
  }
  .pagination {
    padding-right: 0!important;
  }
   .create-title {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
    font-size: 16px;
    margin-bottom: 30px;
    font-weight: normal;
  }
  .alarmLevel {
    cursor: pointer;
  }
 .fontOne{
    font-size: 15px;
    width:90px;
    height:29px;
    float:left;
    font-weight:bold
  }
  .fontTwo{
    font-size: 15px;
    width:800px;
    height:29px;
  }
  .filter-bar-query{
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
  }
  .main-content{
    padding: 0!important
  }
  .mousePointer{
    cursor:pointer;
  }
  .icon-config{
    font-size:16px;
    font-weight:bold;
  }
</style>
<template>
   <div class="filter-bar-query" >
    <el-row style="height: 25px;padding-top:5px;" >
      <p class="icon-config">告警配置 <el-button size="small" type="primary" class="el-icon-plus" @click="configEdit"> 编辑（操作中的编辑）</el-button></p>  
    </el-row>
    <template>
      <div style="margin-top:25px;">
      <el-table :data="alarmConfigList">
        <el-table-column prop="level" label="告警级别" min-width="11%" sortable="costom">
            <template scope="scope" >
               <p v-for="(item,key) in scope.row.alarmObjects" :key="key">{{item.objectName}}:{{item.level}}</p>
            </template>
        </el-table-column>
        <el-table-column prop="alarmDesc" label="告警描述" min-width="13%" ></el-table-column>
        <el-table-column prop="status" label="状态" min-width="11%" sortable="costom"></el-table-column>
        <el-table-column prop="alarmObjects" label="告警对象" min-width="11%" sortable="costom">
            <template scope="scope">
                  <span v-for="(item,key) in scope.row.alarmObjects" :key="key">{{item.objectName}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="channels" label="发送通道" min-width="11%" sortable="costom">
            <template scope="scope">
                {{scope.row.channels}}
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="12%" sortable="costom"></el-table-column>
        <el-table-column prop="" label="操作" min-width="11%">
             <template scope="scope" type="small">
               <router-link :to="'/alarm/config-alarmEdit' + scope.row.editId">
                    <el-button class="btn-text" type="text" >编辑</el-button>
               </router-link>
               <el-button class="btn-text" type="text" @click.native="del(scope.row)">删除</el-button>
               <el-button class="btn-text" type="text"  >启用</el-button>
          </template>
        </el-table-column>
      </el-table>     
       <!--<el-dialog
      title="提示"
      :visible.sync=""
      size="tiny">
      <span>确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="">取 消</el-button>
        <el-button size="small" type="primary" :loading="delDisabled" @click="">{{ delDisabled ? '' : '确 定' }}</el-button>
      </span>
    </el-dialog>-->
  </div>
  </template>
  </div>
</template>
<script>
  import { Tabs, Table, TableColumn, Button, Dialog , Input, Row, Col, Pagination, Form,FormItem } from 'element-ui'
  export default {
    data() {
      return {
        alarmConfigList: []
      };
    },
    created() {
       this._alarmConfigListData()
     
    },
    methods: {
        _start(row){
          
        },
        _alarmConfigListData() {
          this.alarmConfigList = []
          var data = {}
          var that = this
          this.api.alarmConfigListData({
            url: '/alarmmanage/alarm/list/?' + 'page=1' + '&' +'size=10' ,
            data: data

          }).then(function(res){
              that.alarmConfigList = res.data

             
          })
        },
        configEdit() {
            this.$router.push({
            path: 'configAlarmEdit'
        })
      },
     
     },
    components: {
      'el-tabs': Tabs,
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-button': Button,
      'el-dialog': Dialog,
      'el-input':Input,
      'el-row': Row,
      'el-col': Col,
      'el-pagination': Pagination,
      'el-form':Form,
      'el-form-item':FormItem
    }
  };
</script>

 

